{% extends 'base.html' %}

{% block title %}供应商管理 - 固定资产管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">供应商管理</li>
            </ol>
        </nav>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="fas fa-truck me-2"></i>供应商管理</h2>
            <div class="btn-group">
                <a href="{% url 'assets:supplier_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>新增供应商
                </a>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                    <span class="visually-hidden">更多操作</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{% url 'assets:supplier_bulk_import' %}">
                        <i class="fas fa-file-import me-2"></i>批量导入供应商
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{% url 'assets:contract_list' %}">
                        <i class="fas fa-file-contract me-2"></i>合同管理
                    </a></li>
                    <li><a class="dropdown-item" href="{% url 'assets:asset_list' %}">
                        <i class="fas fa-cube me-2"></i>资产管理
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" onclick="batchDeleteSuppliers()">
                        <i class="fas fa-trash me-2"></i>批量删除
                    </a></li>
                </ul>
            </div>
        </div>
        
        <!-- 搜索和筛选 -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="d-flex flex-wrap align-items-center gap-2">
                    <div style="width: 280px; min-width: 250px;">
                        <div class="input-group">
                            <input type="text" class="form-control" name="search" placeholder="搜索供应商名称、联系人或信用代码..." value="{{ search_query }}">
                            <button class="btn btn-outline-secondary" type="submit">
                                <i class="fas fa-search me-1"></i>搜索
                            </button>
                        </div>
                    </div>
                    <div style="width: 150px;">
                        <select class="form-select" name="supplier_type" onchange="this.form.submit()">
                            <option value="">所有类型</option>
                            <option value="enterprise" {% if supplier_type_filter == 'enterprise' %}selected{% endif %}>企业</option>
                            <option value="individual" {% if supplier_type_filter == 'individual' %}selected{% endif %}>个体工商户</option>
                            <option value="institution" {% if supplier_type_filter == 'institution' %}selected{% endif %}>事业单位</option>
                            <option value="government" {% if supplier_type_filter == 'government' %}selected{% endif %}>政府机构</option>
                            <option value="other" {% if supplier_type_filter == 'other' %}selected{% endif %}>其他</option>
                        </select>
                    </div>
                    <div>
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="clearSearch()">
                            <i class="fas fa-times me-1"></i>清除
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 供应商列表 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>供应商列表
                    {% if page_obj %}
                        <span class="badge bg-secondary ms-2">{{ page_obj.paginator.count }} 个供应商</span>
                    {% endif %}
                </h5>
            </div>
            <div class="card-body">
                <form id="batchDeleteForm" method="post" action="{% url 'assets:supplier_batch_delete' %}">
                    {% csrf_token %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th width="4%">
                                        <input type="checkbox" class="form-check-input" id="selectAllHeader" onchange="toggleSelectAll()">
                                    </th>
                                    <th width="18%">供应商名称</th>
                                    <th width="10%">类型</th>
                                    <th width="12%">联系人</th>
                                    <th width="12%">联系电话</th>
                                    <th width="15%">邮箱</th>
                                    <th width="12%">信用代码</th>
                                    <th width="8%">创建时间</th>
                                    <th width="9%">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for supplier in page_obj %}
                                <tr>
                                    <td>
                                        <input type="checkbox" class="form-check-input supplier-checkbox" name="supplier_ids" value="{{ supplier.pk }}">
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            {% if supplier.supplier_type == 'enterprise' %}
                                                <i class="fas fa-building me-2 text-primary"></i>
                                            {% elif supplier.supplier_type == 'individual' %}
                                                <i class="fas fa-user-tie me-2 text-success"></i>
                                            {% elif supplier.supplier_type == 'institution' %}
                                                <i class="fas fa-university me-2 text-info"></i>
                                            {% elif supplier.supplier_type == 'government' %}
                                                <i class="fas fa-landmark me-2 text-warning"></i>
                                            {% else %}
                                                <i class="fas fa-truck me-2 text-secondary"></i>
                                            {% endif %}
                                            <div>
                                                <strong>{{ supplier.name }}</strong>
                                                {% if supplier.legal_representative %}
                                                    <br><small class="text-muted">法人: {{ supplier.legal_representative }}</small>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        {% if supplier.supplier_type == 'enterprise' %}
                                            <span class="badge bg-primary">企业</span>
                                        {% elif supplier.supplier_type == 'individual' %}
                                            <span class="badge bg-success">个体户</span>
                                        {% elif supplier.supplier_type == 'institution' %}
                                            <span class="badge bg-info">事业单位</span>
                                        {% elif supplier.supplier_type == 'government' %}
                                            <span class="badge bg-warning">政府机构</span>
                                        {% else %}
                                            <span class="badge bg-secondary">其他</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if supplier.contact_person %}
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-user me-1 text-info"></i>
                                                <div>
                                                    {{ supplier.contact_person }}
                                                    {% if supplier.contact_position %}
                                                        <br><small class="text-muted">{{ supplier.contact_position }}</small>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            {% if supplier.phone %}
                                                <div class="mb-1">
                                                    <i class="fas fa-phone me-1 text-success"></i>
                                                    <a href="tel:{{ supplier.phone }}" class="text-decoration-none">{{ supplier.phone }}</a>
                                                </div>
                                            {% endif %}
                                            {% if supplier.mobile %}
                                                <div>
                                                    <i class="fas fa-mobile-alt me-1 text-primary"></i>
                                                    <a href="tel:{{ supplier.mobile }}" class="text-decoration-none">{{ supplier.mobile }}</a>
                                                </div>
                                            {% endif %}
                                            {% if not supplier.phone and not supplier.mobile %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td>
                                        {% if supplier.email %}
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-envelope me-1 text-primary"></i>
                                                <a href="mailto:{{ supplier.email }}" class="text-decoration-none" title="{{ supplier.email }}">
                                                    {{ supplier.email|truncatechars:20 }}
                                                </a>
                                            </div>
                                            {% if supplier.website %}
                                                <div class="mt-1">
                                                    <i class="fas fa-globe me-1 text-info"></i>
                                                    <a href="{{ supplier.website }}" target="_blank" class="text-decoration-none" title="{{ supplier.website }}">
                                                        <small>官网</small>
                                                    </a>
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if supplier.credit_code %}
                                            <code class="small">{{ supplier.credit_code|truncatechars:12 }}</code>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="text-nowrap">
                                            <i class="fas fa-calendar me-1 text-muted"></i>
                                            {{ supplier.created_at|date:"m-d H:i" }}
                                        </div>
                                        <small class="text-muted">{{ supplier.created_at|date:"Y" }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{% url 'assets:supplier_detail' supplier.pk %}" class="btn btn-outline-info" title="查看详情">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{% url 'assets:supplier_update' supplier.pk %}" class="btn btn-outline-primary" title="编辑">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{% url 'assets:supplier_delete' supplier.pk %}" class="btn btn-outline-danger" title="删除" onclick="return confirm('确定要删除供应商 {{ supplier.name }} 吗？')">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="9" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fas fa-truck fa-2x mb-2"></i>
                                            <p class="mb-0">暂无供应商数据</p>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="页面导航" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>

<script>
function clearSearch() {
    window.location.href = '{% url "assets:supplier_list" %}';
}

function toggleSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAllHeader');
    const supplierCheckboxes = document.querySelectorAll('.supplier-checkbox');
    const isChecked = selectAllCheckbox.checked;
    
    supplierCheckboxes.forEach(checkbox => {
        checkbox.checked = isChecked;
    });
}

function batchDeleteSuppliers() {
    const checkedBoxes = document.querySelectorAll('.supplier-checkbox:checked');
    
    if (checkedBoxes.length === 0) {
        alert('请选择要删除的供应商');
        return;
    }
    
    const supplierNames = Array.from(checkedBoxes).map(checkbox => {
        const row = checkbox.closest('tr');
        return row.querySelector('strong').textContent;
    });
    
    if (confirm(`确定要删除以下 ${checkedBoxes.length} 个供应商吗？\n\n${supplierNames.join(', ')}\n\n此操作不可撤销！删除供应商可能会影响相关的合同和资产记录。`)) {
        document.getElementById('batchDeleteForm').submit();
    }
}

// 监听单个复选框变化，更新全选状态
document.addEventListener('DOMContentLoaded', function() {
    const supplierCheckboxes = document.querySelectorAll('.supplier-checkbox');
    const selectAllHeader = document.getElementById('selectAllHeader');
    
    supplierCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const checkedCount = document.querySelectorAll('.supplier-checkbox:checked').length;
            const totalCount = supplierCheckboxes.length;
            
            if (selectAllHeader) selectAllHeader.checked = checkedCount === totalCount;
        });
    });
});
</script>
{% endblock %}